<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="24" class="chart-wrapper">
      <track-search></track-search>
    </el-row>
    <el-row :gutter="32" style="margin-bottom: 17.7px">
      <el-col :xs="24" :sm="12" :lg="12">
        <div class="chart-wrapper-one">
          <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #30ACEF;margin-top: 9px;margin-bottom: 15px">犯罪嫌疑车辆</p>
          <div style="width: 100%;height: 350px; overflow:auto;">
            <el-table :data="suspects" element-loading-background="rgba(0, 0, 0, .3)"
                      height="340"
                      :row-class-name="tableRowClassName"
                      style="width: 100%;padding-top: 0px;background-color: #1B4685"
                      :default-sort="{prop: 'time', order: 'descending'}">
              <el-table-column label="车牌号" align="center">
                <template slot-scope="scope">
                  {{scope.row.plateNo}}
                </template>
              </el-table-column>
              <el-table-column prop="time" label="发现地点" align="center">
                <template slot-scope="scope">
                  {{scope.row.parkName}}
                </template>
              </el-table-column>
              <el-table-column label="发现时间" align="center" sortable>
                <template slot-scope="scope">
                  {{scope.row.time| formatString }}
                </template>
              </el-table-column>

            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12">
        <div class="chart-wrapper-one">
          <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #30ACEF;margin-top: 9px;margin-bottom: 15px">脱审车辆</p>
          <div style="width: 100%;height: 350px; overflow:auto;">
            <el-table :data="overdues" height="340"
                      :row-class-name="tableRowClassName"
                      style="width: 100%;padding-top: 0px;background-color: #1B4685"
                      :default-sort="{prop: 'time', order: 'descending'}">
              <el-table-column label="车牌号" align="center">
                <template slot-scope="scope">
                  {{scope.row.plateNo}}
                </template>
              </el-table-column>
              <el-table-column prop="time" label="发现地点" align="center">
                <template slot-scope="scope">
                  {{scope.row.parkName}}
                </template>
              </el-table-column>
              <el-table-column label="发现时间" align="center" sortable>
                <template slot-scope="scope">
                  {{scope.row.time| formatString }}
                </template>
              </el-table-column>

            </el-table>
          </div>
        </div>
      </el-col>

    </el-row>
      <el-row :gutter="32">
        <el-col :xs="24" :sm="12" :lg="12">
          <div class="chart-wrapper-one">
            <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #30ACEF;margin-top: 9px;margin-bottom: 15px">疑似套牌车辆</p>
            <div style="width: 100%;height: 350px; overflow:auto;">
              <el-table :data="fakes" :row-class-name="tableRowClassName"
                        height="340"
                        style="width: 100%;padding-top: 0px;background-color: #1B4685"
                        :default-sort="{prop: 'time', order: 'descending'}">
                <el-table-column label="车牌号" align="center">
                  <template slot-scope="scope">
                    {{scope.row.plateNo}}
                  </template>
                </el-table-column>
                <el-table-column prop="time" label="发现地点" align="center">
                  <template slot-scope="scope">
                    {{scope.row.parkName}}
                  </template>
                </el-table-column>
                <el-table-column label="发现时间" align="center" sortable>
                  <template slot-scope="scope">
                    {{scope.row.time| formatString }}
                  </template>
                </el-table-column>

              </el-table>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12">
          <div class="chart-wrapper-one">
            <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #30ACEF;margin-top: 9px;margin-bottom: 15px">欠费车辆</p>
            <div style="width: 100%;height: 350px; overflow:auto;">
              <el-table :data="arrears" :row-class-name="tableRowClassName"
                        height="340"
                        style="width: 100%;padding-top: 0px;background-color: #1B4685"
                        :default-sort="{prop: 'time', order: 'descending'}">
                <el-table-column label="车牌号" align="center">
                  <template slot-scope="scope">
                    {{scope.row.plateNo}}
                  </template>
                </el-table-column>
                <el-table-column prop="time" label="发现地点" align="center">
                  <template slot-scope="scope">
                    {{scope.row.parkName}}
                  </template>
                </el-table-column>
                <el-table-column label="发现时间" align="center" sortable>
                  <template slot-scope="scope">
                    {{scope.row.time| formatString }}
                  </template>
                </el-table-column>

              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
  </div>

</template>

<script>
  import {queryCarTraceRecord, queryLastCarTraceMessageByType} from '../../api/comprehensive/track';
  import TrackSearch from './compreChild/trackSearch';
  import {formatDateToTime, convertStrToDate} from '../../filters/index.js';

  export default {
    components: {
      TrackSearch
    },
    created() {
      this.timerData()
      this.interval = setInterval(this.timerData, 5000)
    },
    beforeDestroy() {
      clearInterval(this.interval)
    },

    data() {
      return {
        interval: null,
        trackListRes: null,
        loading: false,
        suspects: [],
        overdues: [],
        fakes: [],
        arrears: [],
        queryData: '',
        listQuery: {
          page: 1,
          limit: 20
        },
        carTraceMessage: {
          parkName: null,
          plateColor: null,
          plateNo: null,
          time: null,
          typeName: null

        },

        CarTraceParam: {
          plateColor: null,
          traceType: null,
          plateNo: null

        },
        CarTraceRecord: {
          inImageUrl: null,
          linkMan: null,
          linkManPhone: null,
          orgName: null,
          orgNo: null,
          parkName: null,
          parkNo: null,
          parkType: null,
          plateColor: null,
          plateNo: null,
          time: null,
          times: null,
          type: null,
          typeName: null
        }
      };
    },
    filters: {
      formatString(time) {
        return formatDateToTime(convertStrToDate(time));
      }
    },
    methods: {
      queryLastCarTraceMessageByType(type) {
        const carTraceMessageParam = {type: type, count: 5};
        queryLastCarTraceMessageByType(carTraceMessageParam).then(res => {
          switch (type) {
            case 1:
              this.suspects = res;
              break;
            case 2:
              this.overdues = res;
              break;
            case 3:
              this.fakes = res;
              break;
            case 4:
              this.arrears = res;
              break;
          }
        }, () => {
        });
      },

      queryCarTraceRecord() {
        // 车场信息
        queryCarTraceRecord().then((data) => {
          this.parkInfoList = data;
        });
      },
      timerData() {
        this.queryLastCarTraceMessageByType(1);
        this.queryLastCarTraceMessageByType(2);
        this.queryLastCarTraceMessageByType(3);
        this.queryLastCarTraceMessageByType(4);
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
          return 'one-row';
        }
        return '';
      }

    }
  };
</script>

<style lang="less" scoped>
  .chart-wrapper-one{
    padding-top: 9px !important;
    padding-bottom: 14px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    background: #1B4685;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.20);
    border-radius: 2px;
  }
  .dashboard-editor-container {
    padding: 32px;
    background-color: #1A4380;
    .chart-wrapper {
      background: #1B4685;
      padding-top: 12px;
      margin-bottom:17.7px;
      padding-left: 16px;
      padding-right: 16px;
      background: #1B4685;
      box-shadow: 0 4px 12px 0 rgba(0,0,0,0.20);
      border-radius: 2px;
    }
  }

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    margin-bottom: 32px;
    height: 110px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
      .icon-people {
        background: #40E0D0;
      }
      .icon-message {
        background: #36a3f7;
      }
      .icon-money {
        background: #EEB422;
      }
      .icon-shoppingCard {
        background: #548B54
      }
    }
    .icon-people {
      color: #40c9c6;
    }
    .icon-message {
      color: #36a3f7;
    }
    .icon-money {
      color: #F5A327;
    }
    .icon-shoppingCard {
      color: #ACD261
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px 15px;
      margin-left: 0px;
      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .card-panel-num {
        font-size: 20px;
      }
    }
  }

  .card-panel-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

</style>
